<template>
    <div class="max-width p-[50px_15px] flex flex-col gap-40px">
        <div class="flex justify-between items-center">
            <div class="text-55px">为增长而构建。</div>
            <div class="flex items-center gap-[8px]">
                <div
                    v-for="(v, i) in menus"
                    :key="i"
                    class="block7-menu"
                    :class="{ 'block7-menu-active': current == i }"
                    @click="onClickMenu(i)"
                >
                    {{ v.name }}
                </div>
            </div>
        </div>
        <div>
            <div></div>
            <div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div>
            <!-- ...... -->
            <div></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"

const menus = reactive([{ name: "支付" }, { name: "游戏" }, { name: "NFTS" }, { name: "DEFI" }, { name: "DAOS" }])

const current = ref(0)

const onClickMenu = (value) => {
    current.value = value
}
</script>

<style scoped>
.block7-menu {
    --at-apply: text-12.2px bg-#1B1622 p-[12px_16px] rounded-[20px] cursor-pointer hover:bg-[#221B2A];
}
.block7-menu-active {
    --at-apply: border-(1px solid #be56fe);
}
</style>
